/*
 * @Author: haungyan
 * @Date: 2020-12-28 13:52:52
 * @LastEditors: haungyan
 * @LastEditTime: 2020-12-28 17:06:34
 * @Description: file content
 * @FilePath: \fed-e-task-03-01\code\moveDemo\src\js\index.js
 */
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
import { classModule } from 'snabbdom/build/package/modules/class'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'
const datas = [
    { rank: 1, title: '开局签到荒古圣体', desc: '君逍遥穿越玄幻世界，成为荒古世家神子，拥有无敌背景' },
    { rank: 2, title: '圣墟', desc: '在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了' },
    { rank: 3, title: '我的孝心变质了', desc: '穿越真灵大陆，萧然成为一代女尊伶舟月的亲传弟子，绑定“最强孝心系统”的他，只要给师尊尽孝心就能变' },
    { rank: 4, title: '我的徒弟都是大反派', desc: '陆州一觉醒来成了世间最强大最老的魔头祖师爷，还有九个恶贯满盈，威震天下的徒弟。大徒弟幽冥教教主手' },
    { rank: 5, title: '临渊行', desc: '本书已出版，各大网上平台及新华书店有售&gt;苏云怎么也没有想到，自己生活了十几年的天门镇，只有' },
    { rank: 6, title: '我在玄幻世界冒充天机神算', desc: '这是个弱者会沦为魂奴、药奴、鼎炉，囚笼的黑暗修行界。你以为穿越有系统就能作威作福？就' },
    { rank: 7, title: '孙猴子是我师弟', desc: '孙悟空：师兄教我法术。金肆：教你一招尾兽玉，来，张嘴菩提老祖：你弄一头小狐狸回来做什么？金肆：我' }
]

const patch = init([ classModule, eventListenersModule, styleModule ])
const appContainer = document.querySelector('#app')
let app = null

function render(el) {
    app = patch(el || app, h('ul', null, datas.map(renderItem)))
    initEvents()
}
render(appContainer)

function renderItem(item, index) {
    const childrens = [
        h('div', {
            class: { index: true, item: true },
            props: { text: '123' },
            text: item.rank
        }, item.rank),
        h('div', {
            class: { title: true, item: true },
            props: { text: '123' },
            text: item.title
        }, item.title),
        h('div', {
            class: { desc: true, item: true },
            props: { text: '123' },
            text: item.desc
        }, item.desc),
        h('div', {
            class: { close: true },
            text: 'X',
            on: {
                click: () => { handleDel(index) }
            }
        }, 'X')
    ]
    return h('li', {
        class: { li: true },
        key: index
    }, childrens)
}

// 添加
function handleAdd() {
    const maxIndex = findMaxRank(datas)
    datas.unshift({ rank: maxIndex + 1, title: '我是新增的title', desc: '我是新增的desc' })
    render()
}

// 删除
function handleDel(index) {
    datas.splice(index, 1)
    render()
}

// 排序
function handleSort(key) {
    datas.sort((a, b) => {
        return a[key] > b[key] ? 1 : -1
    })
    render()
}

function findMaxRank(list) {
    const indexs = list.map(item => item.rank)
    return Math.max(...indexs)
}

 // 绑定事件
function initEvents() {
    const btns = document.querySelectorAll('.oper .btn')
    btns.forEach(el => {
        el.onclick = function(e) {
            const { key } = e.target.dataset
            if (key) {
                handleSort(key)
            }
        }
    })

    document.querySelector('#add').onclick = handleAdd
}
